<template>
  <div class="son">
    <h2>我是子组件</h2>
  </div>
</template>

<script>
export default {
  // name属性 可以让我们在Chrome的插件中
  // 更为便捷的检索组件
  name: 'SonCom',
  // 推荐使用对象的写法
  props: {
    // key:value的格式
    // 有一个prop叫做 age
    // 接收的类型为 字符串
    // 传递的不符合要求，控制台报错，不影响数据传递
    age: String,
    id: [String, Number],
    // prop有一个food的属性
    food: {
      type: String, // 类型是 字符串
      required: true // 必须传递 不传递 报错
    },
    friend: {
      type: String,
      default: 'robot' // 设置默认值之后，不传递用默认值，传递了用传递的值
    }
  }
}
</script>

<style>
.son {
  padding: 10px;
  background-color: orange;
  border: 1px solid #000;
  width: 400px;
  height: 400px;
}
</style>
